<template>
  <div   v-loading="loading">
    <el-row>
      <el-button size="small" type="success" @click="btnAdd" v-auth="'system-dict-data-add'">
        <el-icon>
          <ele-FolderAdd/>
        </el-icon>
        添加
      </el-button>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-table :data="dataList" border style="width: 100%" v-if="!loading">
        <el-table-column prop="dictCode" label="字典编码" align="center"/>
        <el-table-column prop="dictLabel" label="字典标签" align="center"/>
        <el-table-column prop="dictValue" label="字典键值" align="center"/>
        <el-table-column prop="dictSort" label="字典排序" align="center"/>
        <el-table-column prop="state" label="状态" align="center">
          <template #default="scope">
            <el-tag size="small" type="success" v-if="scope.row.state=='0'">正常</el-tag>
            <el-tag size="small" type="info" v-else>停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"/>
        <el-table-column prop="createTime" label="创建时间" align="center"/>
        <el-table-column label="操作" align="center"  v-auths="['system-dict-data-delete','system-dict-data-update']">
          <template #default="scope">
                <el-link type="primary" title="修改" @click="updateFlage(scope.row)"  v-auth="'system-dict-data-update'">
                  <el-icon>
                    <ele-EditPen/>
                  </el-icon>
                </el-link>
                <el-popconfirm title="确定删除吗？" @confirm="deleteRows(scope.row)">
                  <template #reference>
                    <el-link type="danger" title="删除" class="ml10" v-auth="'system-dict-data-delete'">
                      <el-icon>
                        <ele-Delete/>
                      </el-icon>
                    </el-link>
                  </template>
                </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
  <el-drawer
      v-model="showFlag"
      append-to-body
      :before-close="cancel">
    <div style="margin: 20px">
      <el-form :model="refForm" :rules="rules" ref="formView" label-position="top" size="default">
        <el-form-item label="字典类型" prop="dictType">
          <el-input v-model="refForm.dictType" :disabled="true"/>
        </el-form-item>
        <el-form-item label="字典标签" prop="dictLabel">
          <el-input v-model="refForm.dictLabel"/>
        </el-form-item>
        <el-form-item label="字典值码" prop="dictValue">
          <el-input v-model="refForm.dictValue"/>
        </el-form-item>

        <el-form-item label="显示排序" prop="dictSort">
          <el-input-number :min="0" v-model="refForm.dictSort"/>
        </el-form-item>

        <el-form-item label="状态" prop="state">
            <el-radio-group v-model="refForm.state">
              <el-radio v-for="item in stateOptions" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" v-model="refForm.remark"/>
        </el-form-item>

        <el-form-item>
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="subimt()" v-auths="['system-dict-data-update','system-dict-data-add']">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>


</template>

<script setup>
import {queryByType, addDictData, updateDict, deleteById} from '/@/api/system/dict/data'
import {ElMessage, ElMessageBox} from "element-plus";

const loading = ref(true)
const rules = reactive({
  dictType: [
    {required: true, message: '请输入字典类型', trigger: 'blur'},
  ],
  dictLabel: [
    {required: true, message: '请输入字典标签', trigger: 'blur'},
  ],
  dictValue: [
    {required: true, message: '请输入字典值', trigger: 'blur'},
  ]
})

let showFlag = ref(false)


let refForm = reactive({
      dictCode: undefined,
      dictType: undefined,
      dictLabel: undefined,
      dictValue: undefined,
      dictSort: 1,
  state: '0',
      remark: undefined
    }
)

const {proxy} = getCurrentInstance()
const deleteRows = (node) => {
  deleteById(node.dictCode).then(res => {
    ElMessage.success(res.msg)
    getDataList(currentType)
  })
}
let stateOptions = ref([])
const queryOptions=()=>{
  proxy.$dictOptions('sys_common_status').then(res => {
    stateOptions.value = res.data
  })
}

let currentType = null
const subimt = async () => {
  refForm.dictType = currentType
  await proxy.$refs.formView.validate((valid, fields) => {
    if (valid) {
      if (!refForm.dictCode) {
        addDictData(refForm).then(res => {
          ElMessage.success(res.msg)
          cancel()
          getDataList(currentType)
        })
      } else {
        updateDict(refForm).then(res => {
          ElMessage.success(res.msg)
          cancel()
          getDataList(currentType)
        })
      }
    } else {
    }
  })
}
const dataList = ref([])
const getDataList = (dictType) => {
  currentType = dictType
  queryByType(dictType).then(res => {
    dataList.value = res.data
    loading.value = false
  })
}


const btnAdd = () => {
  refForm.dictType = currentType
  showFlag.value = true
}

const updateFlage = (node) => {
  let {dictCode, dictType, dictLabel, dictValue, dictSort, state, remark} = node
  refForm.dictCode = dictCode
  refForm.dictType = dictType
  refForm.dictLabel = dictLabel
  refForm.dictValue = dictValue
  refForm.dictSort = dictSort
  refForm.state = state
  refForm.remark = remark
  showFlag.value = true
}

const cancel = () => {
  proxy.$refs.formView.clearValidate()
  refForm.dictCode = undefined
  refForm.dictType = currentType
  refForm.dictLabel = undefined
  refForm.dictValue = undefined
  refForm.dictSort = 1
  refForm.state = '0'
  refForm.remark = undefined
  showFlag.value = false
}
onBeforeMount(()=>{
  queryOptions()
})

defineExpose({
  getDataList
})
</script>

<style scoped>

</style>
